HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="300"]
HTML[/caption]
ویژگی Style
کلمه ی style در لغت به معنی «سبک» یا «طرح» یا همان «استایل» ای است که در فارسی نیز می گوییم. در واقع کار این تگ اعمال دستورات زبان CSS در کد های HTML است. ساختار کلی style به این شکل است:(ایران گستر)
|
|
<tagname style="property:value;">
|
در این ساختار، property یک خصوصیت CSS (مانند سایز فونت و …) است و value نیز مقداری که آن خصوصیت می گیرد (مانند 25px و …). در مورد این تگ در دوره ی آموزشی CSS به طور مفصل صحبت خواهیم کرد.(ایران گستر)
بهترین راه برای یادگیری این ویژگی استفاده از مثال های مختلف است بنابراین چندین مثال از آن را برایتان آماده کرده ایم.
رنگ پس زمینه در HTML
خصوصیت background-color، یک رنگ پس زمینه را برای سند HTML ما و یا یکی از عناصر آن تعیین می کند. در مثال زیر رنگ پس زمینه ی سند HTML را به رنگ powderblue تنظیم کرده ایم. اگر نمی دانید این رنگ چیست می توانید در گوگل جست و جو کنید.(ایران گستر)
|
|
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>Thisisaheading</h1>
<p>Thisisaparagraph.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
سوال: من از کجا بدانم چه رنگ هایی می توانم به عنوان value بگذارم؟
پاسخ: جواب این سوال طولانی است اما به صورت خلاصه بدانید که رنگ ها در CSS به دو صورت حرفی (مانند brown به معنی قهوه ای و ..) و کُدی (مانند fff#) انتخاب می شوند. در دوره ی CSS با آن ها به طور کامل آشنا خواهیم شد اما برخی از این رنگ ها را به صورت خلاصه به شما معرفی می کنم.(ایران گستر)
| نام رنگ به صورت حرفی |
کد HEX |
| Aqua |
#00FFFF |
| Black |
#000000 |
| CadetBlue |
#5F9EA0 |
| Coral |
#FF7F50 |
| Crimson |
#DC143C |
| Cyan |
#00FFFF |
| DarkOrange |
#FF8C00 |
| DeepSkyBlue |
#00BFFF |
| HotPink |
#FF69B4 |
شما می توانید از هر کدام از این رنگ ها که خواستید استفاده کنید. در واقع تعداد این رنگ ها بیشتر از این ها است و جدول بالا تنها مشتی از خروار است! اگر دقت کرده باشید متوجه می شوید رنگ هایی که در جدول بالا آورده ایم هم نام دارند و هم کد. این یعنی در زبان CSS می توانید به جای کد هایشان از نام هایشان استفاده کنید (مانند "style="background-color:powderblue) اما بسیاری از رنگ هایی که ما می خواهیم دارای نام نیستند بنابراین تنها راه استفاده از آن ها تعیین رنگ به وسیله ی کد HEX است.(ایران گستر)
اگر نیاز به کد رنگ خاصی دارید، می توانید به وب سایت htmlcolorcodes.com یا امثال آن مراجعه کنید.
سوال: آیا رنگ ها فقط در کد HEX هستند؟
پاسخ: خیر رنگ ها در قالب های HSL و HSA و … نیز موجود هستند که در دوره ی CSS مورد بحث قرار خواهند گرفت.(ایران گستر)
رنگ متون
خصوصیت color رنگ متن یک عنصر HTML را تعیین می کند. به مثال زیر توجه کنید:(ایران گستر)
|
|
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">Thisisaheading</h1>
<pstyle="color:red;">Thisisaparagraph.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
فونت متون
خصوصیت font-family نوع فونت یک متن را انتخاب می کند. البته بر اساس نحوه ی استفاده، می توانید فونت کل سند HTML را نیز تغییر دهید. مثال:(ایران گستر)
|
|
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">Thisisaheading</h1>
<pstyle="font-family:courier;">Thisisaparagraph.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همانطور که در خروجی مشاهده می کنید در این متن از دو فونت verdana و courier استفاده کرده ایم.
سوال: آیا می توانیم نام هر فونتی را به این خصوصیت بدهیم؟(ایران گستر)
پاسخ: بستگی دارد! اگر فونتی که انتخاب کرده اید از فونت های پیش فرض موجود در مرورگر ها نباشد باید آن را import کنید که خودش بحث جداگانه ای دارد و در دوره ی CSS مورد بحث قرار خواهد گرفت.(ایران گستر)
اندازه ی متون
خصوصیت font-size اندازه ی فونت یک عنصر را مشخص می کند. در واقع این خصوصیت همان خصوصیتی است که در قسمت های قبلی در موردش صحبت کردیم و گفتیم می توانید با آن اندازه ی heading ها را تغییر دهید! به مثال زیر توجه کنید:(ایران گستر)
|
|
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">Thisisaheading</h1>
<pstyle="font-size:160%;">Thisisaparagraph.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اگر خروجی این کد را مشاهده کنید می بینید که اندازه ی تگ های h1 و p به اندازه ی پیش فرضشان نیستند و بزرگترشان کرده ایم.(ایران گستر)
سوال: چرا اندازه ی فونت ها به درصد تعیین شده است؟
پاسخ: در CSS شما می توانید از واحد های مختلفی برای تعیین سایز عناصر، سایز متون و … استفاده کنید. یکی از آن ها درصد است. از دیگر واحد ها می توان پیکسل (px) را نام برد. توضیح کامل این موارد مربوط به دوره ی CSS است و در بحث ما نمی گنجد، بلکه نگاه ما به این کد ها به عنوان ویژگی (attribute) های HTML است.(ایران گستر)
تراز کردن افقی متون
خصوصیت text-align کار ترازبندی افقی متون را بر عهده دارد. به مثال زیر توجه کنید:
|
|
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<pstyle="text-align:center;">Centered paragraph.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در این مثال ما ترازبندی را center (به معنی «وسط») قرار داده ایم و در خروجی نیز مشخص است که متون ما در وسط صفحه قرار گرفته اند.(ایران گستر)
سوال: آیا می توانیم چندین خصوصیت را به یک ویژگی style بدهیم؟
پاسخ: بله! این کار را در مثال زیر انجام داده ام:
|
|
<!DOCTYPE html>
<html>
<body>
<p>Iam normal</p>
<pstyle="color:red; font-size:300%; text-align:center;">Iam red</p>
<pstyle="color:blue; font-family:courier;">Iam blue</p>
<pstyle="font-size:50px; font-family:calibri;">Iam big</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
:: بازدید از این مطلب : 16
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
عضو شوید
عضویت سریع
آمار مطالب
آمار بازدید
